<script setup lang="ts">
import {CommonTable} from "@/components/MyComponent/CommonTable/tableInterface";
import {DictType, Perm} from "@/utils/enum-type";
import {
  addRechargeApi,
  buyRechargeApi,
  deleteRechargeApi,
  editRechargeApi,
  getRechargeByIdApi,
  getRechargeListApi
} from "@/api/sys/dnf/recharge";
import {Recharge} from "@/api/sys/dnf/recharge/types";
import {getDictOptions} from "@/api/sys/admin/dict";
import {commonFormat} from "@/utils/format-table";
import {openConfirm} from "@/components/MyComponent/XMessageBox";
import {useMoneyStore} from "@/store/views/sys/dnf/money";

const moneyStore = useMoneyStore()
const options: CommonTable<Recharge, Recharge> = {
  api: {
    add: addRechargeApi,
    remove: deleteRechargeApi,
    edit: editRechargeApi,
    get: getRechargeByIdApi,
    getList: getRechargeListApi,
  },
  perms: {
    add: Perm.DnfRechargeAdd,
    remove: Perm.DnfRechargeDelete,
    edit: Perm.DnfRechargeEdit,
    view: Perm.DnfRechargeView,
  },
  queryData:{
    pageSize:20,
    order:{
      buyPriceType:'desc',
      buyNum:'asc'
    }
  },
  attrs: [
    {
      prop: 'name',
      label: '名称',
      columnWidth:120
    },
    {
      prop: 'imageUrl',
      label: '图片',
      formType: 'image',
      image: {
        path: 'recharge',
        size: 2,
        borderRadius: '0.5em'
      }
    },
    {
      prop: 'buyNum',
      label: '花费数量',
      formType: 'number',
      query: false
    },
    {
      prop: 'buyPriceType',
      label: '花费类型',
      formType: 'radio',
      code: DictType.DnfPriceType,
    },
    {
      prop: 'rewardNum',
      label: '获得数量',
      formType: 'number',
      query: false
    },
    {
      prop: 'rewardPriceType',
      label: '获得类型',
      formType: 'radio',
      code: DictType.DnfPriceType,
      query: false
    },
    {
      prop: 'remark',
      label: '描述',
      formType: 'textarea',
      query: false,
      sort: false,
      notDisplayOn: ['list']
    },
    {
      prop: 'status',
      label: '状态',
      formType: 'radio',
      notDisplayOn: ['list-phone'],
      query: false,
      code: DictType.Status
    }
  ],
  title: '装备配置',
  form: {
    labelWidth: 100,
    initialForm: {id: 0, name: '', buyNum: 1, buyPriceType: 1, rewardPriceType: 1, rewardNum: 1, status: 1},
    rules: {
      name: [{required: true, message: '请输入物品名称', trigger: 'blur'}],
      buyPriceType: [{required: true, message: '请输入花费类型', trigger: 'blur'}],
      buyNum: [{required: true, message: '请输入花费数量', trigger: 'blur'},
        {type: 'number', message: '最少为1', min: 1}],
      rewardPriceType: [{required: true, message: '请选择获得类型', trigger: 'blur'},
        {type: 'number', message: '只能选择金币和点券', min: 1,max:2}],
      rewardNum: [{required: true, message: '请输入获得数量', trigger: 'blur'},
        {type: 'number', message: '最少为1', min: 1}],
    }
  }
}

async function buy(id: number) {
  const recharge = await getRechargeByIdApi(id)
  const options = await getDictOptions(DictType.DnfPriceType)
  const msg = `确定购买[${recharge.name}],费用[${recharge.buyNum}${commonFormat(recharge.buyPriceType, options)}]`
  if (await openConfirm(msg)) {
    buyRechargeApi(id).then(() => {
      ElMessage.success('购买成功')
      moneyStore.getList()
    })
  }
}
</script>
<template>
  <dnf-user-info/>
  <x-common-table :options="options">
    <template #operation="{row}" v-perm="[Perm.DnfRechargeBuy]">
      <el-button link type="primary" size="small" @click="buy(row.id)">
        <i-ep-shopping-cart/>
        <span>购买</span>
      </el-button>
    </template>
  </x-common-table>
</template>
<style scoped lang="scss">
</style>